<template>
  <div class="weather-info-item">
    <span class="title">{{title}}:</span>
    <span class="val">{{val}}</span>
  </div>
</template>

<script>
export default {
  name: 'weather-info-item',
  props: {
    title: {
      type: String,
      required: true
    },
    val: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="stylus">
.weather-info-item {
  margin: 16px 0;

  .title {
    display: inline-block;
    margin-right: 0.1em;
    color: $font-gray;
  }
}
</style>
